'use client'
import React, { useState, useEffect } from "react";
import { Badge, TabBar } from "antd-mobile";
import { useNavigate, useLocation, Outlet } from "react-router-dom";
import {
  AppOutline,           // 首页（房子）
  AppstoreOutline,      // 分类（四宫格）
  // CompassOutline,       // 发现（指南针）
  TruckOutline, // 购物车
  UserOutline           // 我的（用户）
} from "antd-mobile-icons";
import './shou.css'
export default function Loay() {
    const tabs = [
      {
        key: "/layout/shouye",
        title: "首页",
        icon: <AppOutline />,
      },
      {
        key: "/layout/cate",  
        title: "分类",
        icon: <AppstoreOutline />,
      },
      // {
      //   key: "/layout/gon",
      //   title: "发现",
      //   icon: <CompassOutline />,
      // },
      {
        key: "/layout/cart",  
        title: "购物车",
        icon: <TruckOutline />,
        badge: 2,
      },
      {
        key: "/layout/wode",
        title: "我的",
        icon: <UserOutline />,
      },
    ];
    
      const navigate = useNavigate();
      const location = useLocation();
      const [activeKey, setActiveKey] = useState(location.pathname);
    
      // 同步路由和标签栏状态
      useEffect(() => {
        setActiveKey(location.pathname);
      }, [location.pathname]);
    
      return (
        <div className="min-h-screen flex flex-col">
          {/* 主要内容区域 - 设置内边距避免被底部标签栏遮挡 */}
          <div className="flex-1 overflow-y-auto pb-16">
            <Outlet />
          </div>
    
          {/* 底部标签栏 - 使用fixed定位固定在视口底部 */}
          <div className="qw">
            <TabBar
              activeKey={activeKey}
              onChange={(key) => {
                setActiveKey(key);
                navigate(key);
              }}
            >
              {tabs.map((item) => (
                <TabBar.Item
                  key={item.key}
                  icon={
                    <span
                      style={{
                        display: "flex",
                        alignItems: "center",
                        background: activeKey === item.key ? "#19c2a6" : "transparent",
                        color: activeKey === item.key ? "#fff" : "#222",
                        borderRadius: "16px",
                        padding: activeKey === item.key ? "4px 14px" : "0",
                        transition: "background 0.2s, color 0.2s",
                      }}
                    >
                      {item.icon}
                      {activeKey === item.key && (
                        <span style={{ marginLeft: 6, fontSize: 15 }}>{item.title}</span>
                      )}
                    </span>
                  }
               
                />
              ))}
            </TabBar>
          </div>
        </div>
      );
}